<template>
  <view class="container">
    <!-- 顶部导航栏 -->
<!-- 顶部导航栏（考虑安全区域） -->
		<view class="header" :style="{paddingTop: statusBarHeight + 'px'}">
		  <!-- 返回按钮 -->
		  <view class="back-btn" style="top: 95rpx;" @click="goBack">
			<uni-icons type="left" color="#fff" size="20"></uni-icons>
		  </view>
		  
		  <!-- 用户信息（居中显示） -->
		  <view class="user-info"  style="left: 12%; top: 70rpx;">
			<image @click="userClick(userInfo.user_info)" class="avatar" :src="userInfo.user_info.avatar" mode="aspectFill"></image>
			<view class="user-text">
			  <text class="nickname">{{userInfo.user_info.nickname}} </text>
			</view>
			<text v-if="!userInfo.is_self"  class="follow-btn" style="margin-left: 30rpx;color: #fff;" @click="toggleFollow">{{userInfo.is_following ? '已收藏' : ' 收藏'}}</text>
		  </view>
		 
		</view>
    <!-- 内容区域 -->
    <view class="content" :style="'margin-top:'+ statusBarHeight + 'px'">
		

      <!-- 标题 -->
      <view class="title" style="margin-top: 30rpx;">{{userInfo.title}}</view>

      <!-- 图片轮播 -->
      <view class="image-slider" style="height: 900rpx;" v-if="hasImages().length>0">
        <swiper  class="slider" :autoplay="true" :indicator-dots="true" :indicator-color="'rgba(255,255,255,0.4)'" :indicator-active-color="'#fff'">
          <block v-for="(img, index) in hasImages()" :key="index">
            <swiper-item>
              <image class="slide-image" :src="img.url"  @click="previewImage(index)"></image>
            </swiper-item>
          </block>
        </swiper>
        <view class="image-count" v-if="hasImages().length > 1">
          {{currentImageIndex + 1}}/{{hasImages().length}}
        </view>
      </view>

      <!-- 标签 -->
      <view class="tags">
        <text class="tag"  :key="index" @click="searchTag(tag)">#{{userInfo.category}}</text>
      </view>

      <!-- 笔记正文 -->
      <view class="note-content">{{userInfo.content}}</view>

      <!-- 位置信息 -->
      <view class="location" v-if="userInfo.location">
        <image class="location-icon" src="/static/location.png" mode="aspectFit"></image>
        <text class="location-text">{{userInfo.location}}</text>
      </view>

      <!-- 发布时间 -->
      <view class="publish-time">
        {{userInfo.created_at}} · {{userInfo.view_count}}浏览
      </view>

      <!-- 评论区域 -->
      <view class="comments-section">
        <view class="section-title">
          <text class="title-text">留言 {{userInfo.comment_count || ''}}</text>
        </view>

        <!-- 评论列表 -->
        <view class="comments-list" v-if="comments.length > 0">
          <view class="comment-item" v-for="(comment, index) in comments" :key="index">
            <image class="comment-avatar" :src="comment.avatar" mode="aspectFill" @click="viewUser(comment.user_id)"></image>
            <view class="comment-content">
              <view class="comment-header"  @click="replyComment(index)">
                <text class="comment-user" style="font-size: 26rpx;">{{comment.nickname}}</text>
                
              </view>
              <text class="comment-text" style="font-size: 26rpx;">{{comment.content}}</text>
             <!-- 回复按钮 -->
			 <text class="comment-time">{{formatRelativeTime(comment.created_at)}}</text>
             <text class="reply-btn" style="margin-left: 15rpx;"  @click="replyComment(index)">
               回复
             </text>

              <!-- 回复列表 -->
              <view class="replies-container" v-if="comment.children.length > 0">
                <view v-if="replyIdx < 2 && !comment.show" style="display: flex; align-items: center;" class="reply-item" v-for="(reply, replyIdx) in comment.children" :key="replyIdx">
					<image style="width: 55rpx;height: 55rpx;border-radius: 50%;" :src="reply.avatar" mode="aspectFill" @click="viewUser(reply.user_id)"></image>
				  <view style="margin-left: 20rpx;" @click="replyComment(replyIdx)">
					  <view>
						  <text style="font-size: 26rpx;" class="reply-user" @click="viewUser(reply.user_id)">{{reply.nickname}}</text>
					  </view>
					  <text class="reply-text" style="font-size: 26rpx;">{{reply.content}}</text>
					  <text class="comment-time">{{formatRelativeTime(reply.created_at)}}</text>
					  <text class="reply-btn" style="margin-left: 15rpx;font-size: 25rpx;"  @click="replyComment(replyIdx)">
					    回复
					  </text>
				  </view>
				</view>
				<view v-if="comment.show" style="display: flex; align-items: center;" class="reply-item" v-for="(reply, replyIdx) in comment.children" :key="replyIdx">
					<image style="width: 55rpx;height: 55rpx;border-radius: 50%;" :src="reply.avatar" mode="aspectFill" @click="viewUser(reply.user_id)"></image>
				  <view style="margin-left: 20rpx;" @click="replyComment(replyIdx)">
					  <view>
						  <text style="font-size: 26rpx;" class="reply-user" @click="viewUser(reply.user_id)">{{reply.nickname}}</text>
					  </view>
					  <text class="reply-text" style="font-size: 26rpx;">{{reply.content}}</text>
					  <text class="comment-time">{{formatRelativeTime(reply.created_at)}}</text>
					  <text class="reply-btn" style="margin-left: 15rpx;font-size: 25rpx;"  @click="replyComment(replyIdx)">
					    回复
					  </text>
				  </view>
				</view>
                <view v-if="comment.children.length>=2" class="view-more-replies"  style="font-size: 25rpx;"  @click=" viewAllReplies(comment)">
                 {{!comment.show?'查看全部' +`${comment.children.length}` +'条回复' : '收起所有留言'}}
                </view>
              </view>

             
            </view>
          </view>
        </view>

        <!-- 没有评论 -->
        <view class="no-comments" v-else>
          <image class="empty-icon" src="/static/empty-comment.png"></image>
          <text class="empty-text">暂无留言，快来抢沙发</text>
        </view>

        <!-- 加载更多 -->
       <!-- <view class="load-more" v-if="hasMoreComments && comments.length > 0" @click="loadMoreComments">
          <text class="load-more-text">加载更多</text>
          <image class="arrow-down" src="/static/arrow-down.png"></image>
        </view> -->
      </view>
    </view>

    <!-- 底部评论输入框 -->
    <view class="comment-input-bar">
      <view class="input-container">
        <input class="comment-input" :placeholder="ping.length > 0?ping:'说点什么...'" v-model="commentContent" @focus="showEmoji = false" confirm-type="留言" @confirm="postComment">
        <view class="input-actions">
          <image class="emoji-btn" src="/static/emoji.png" @click="toggleEmoji"></image>
          <button class="post-btn" :class="{active: commentContent.length > 0}" @click="postComment">留言</button>
        </view>
      </view>
	  <view class="comment-actions" style="margin-left: 25rpx; ">
	    <view class="like-comment" >
	      <uni-icons :type="userInfo.is_collected?'star-filled':'star'" @click.native.stop="likeComment()" size="34" :color="userInfo.is_collected ? '#ffff00' : '#999'"></uni-icons>
	      <text class="like-count" >{{userInfo.collect_count||0}}</text>
	    </view>
	  </view>
	  <view class="comment-actions" style="margin-left: 25rpx;">
	    <view class="like-comment" >
	      <uni-icons :type="userInfo.is_liked?'heart-filled':'heart'" @click.native.stop="likecount()" size="32" :color="userInfo.is_liked ? '#ff4d6d' : '#999'"></uni-icons>
	      <text class="like-count">{{userInfo.like_count||0}}</text>
	    </view>
	  </view>
    </view>

    <!-- Emoji面板 -->
    <view class="emoji-panel" v-if="showEmoji">
      <scroll-view class="emoji-list" scroll-y>
        <!-- 这里放置emoji列表 -->
		<view class="emoji-list-dis">
			<view v-for="(emoji, index) in emojis" :key="index" >
				<text class="emoji-item"  @click="insertEmoji(emoji)">{{emoji}}</text>
			</view>
		</view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
	  statusBarHeight:20,
      // 用户信息
      userInfo: {},
      isFollowing: false,
      // 笔记信息
      currentImageIndex: 0,
      
      // 互动数据
      commentCount: 66,
      
      // 相关笔记
      relatedNotes: [
        { id: 101, cover: 'https://picsum.photos/300/300?random=20', title: '贵阳生活成本分析' },
        { id: 102, cover: 'https://picsum.photos/300/300?random=21', title: '贵阳热门公司推荐' },
        { id: 103, cover: 'https://picsum.photos/300/300?random=22', title: '贵阳旅游攻略' },
        { id: 104, cover: 'https://picsum.photos/300/300?random=23', title: '贵阳美食探店' }
      ],
      
      // 评论相关
      commentContent: '',
	  ping:'',
      showEmoji: false,
      comments: [
       
      ],
      commentPage: 1,
      hasMoreComments: true,
      option:{},
	  parent_id:'',
      // Emoji数据
      emojis: ['😀','😂','😍','😎','😭','😡','🤔','😴','🥰','😇','🤩','🥳','🤯','😱','🤢','👻',  '❤️', '🎉', '🔥', '💯', '👏','👍','👎','✌️','🤞','🤟','🤘','👌','🤏','✋','👋','🤚','🖐️','👐','🙌','👏','🙏','🐶','🐱','🐭','🐹','🐰','🦊','🐻','🐼','🐨','🐯','🦁','🐮','🐷','🐸','🐵','🐔','🎈','🎉','🎊','🎁','🎀','🎄','🎃','🎆','🎇','✨','🎎','🎏','🎐','🎑','🧧','🎀']
    }
  },
  methods: {
	formatRelativeTime(dateString) {
	    const date = new Date(dateString);
	    const now = new Date();
	    const diffInSeconds = Math.floor((now - date) / 1000);
	    
	    const seconds = Math.abs(diffInSeconds);
	    const minutes = Math.floor(seconds / 60);
	    const hours = Math.floor(minutes / 60);
	    const days = Math.floor(hours / 24);
	    
	    if (diffInSeconds < 0) {
	        // 未来时间
	        if (seconds < 60) return '刚刚';
	        if (minutes < 60) return `${minutes}分钟后`;
	        if (hours < 24) return `${hours}小时后`;
	        return `${days}天后`;
	    } else {
	        // 过去时间
	        if (seconds < 60) return '刚刚';
	        if (minutes < 60) return `${minutes}分钟前`;
	        if (hours < 24) return `${hours}小时前`;
	        return `${days}天前`;
	    }
	},
	// 加载评论
	async loadComments() {
		 const res = await this.$api.get('Comment/index',{confession_id:this.option.id},true)
		 if(res.data.code === 200) {
			 this.comments = res.data.data
			 console.log('加载评论',this.comments)
			 this.loadingComments = false
			 this.refreshingComments = false
			 this.loadingMoreComments = false 
		 }
	    
	},
	
	// 判断是否有图片
	hasImages() {
		console.log('dada',this.userInfo.images)
	  return this.userInfo.images || [] ;
	},
	async getUserInfo(id){
		const res = await this.$api.get('/Confessions/get',{id:id},true)
		if(res.data.code == 200){
			this.userInfo = res.data.data
			this.userInfo.images = JSON.parse(this.userInfo.images)
		}
	},
	userClick(item){
		uni.navigateTo({
			url:`/pagesA/user?id=${item.user_id}`
		})
	},
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    // 获取系统信息
	getSystemInfo() {
	  try {
		const systemInfo = uni.getSystemInfoSync()
		this.statusBarHeight = systemInfo.statusBarHeight + 20 || 20
	  } catch (e) {
		console.error('获取系统信息失败', e)
	  }
	},
    // 关注/取消关注
    async toggleFollow() {
	  this.userInfo.is_following = !this.userInfo.is_following
	  const res = await this.$api.post('/user/toggleFollow',{targetId:this.userInfo.user_info.user_id},true)
	  if(res.data.code === 200) {
	  	this.getUserInfo(this.option.id)
	  }
    },
    
    // 预览图片
    previewImage(index) {
		const images = this.hasImages().map(item => item.url)
		console.log('dasda',images)
      uni.previewImage({
        current: index,
        urls: images
      })
    },
    
    // 搜索标签
    searchTag(tag) {
      uni.navigateTo({
        url: `/pages/search/search?keyword=${tag}`
      })
    },
    
    // 点赞功能
    toggleLike() {
      this.isLiked = !this.isLiked
      this.likeCount += this.isLiked ? 1 : -1
      uni.showToast({
        title: this.isLiked ? '点赞成功' : '已取消点赞',
        icon: 'none'
      })
    },
    
    // 收藏功能
    toggleCollect() {
      this.isCollected = !this.isCollected
      this.collectCount += this.isCollected ? 1 : -1
      uni.showToast({
        title: this.isCollected ? '收藏成功' : '已取消收藏',
        icon: 'none'
      })
    },
    
    // 分享笔记
    shareNote() {
      uni.showActionSheet({
        itemList: ['分享给好友', '复制链接', '保存图片'],
        success: (res) => {
          console.log('分享方式:', res.tapIndex)
        }
      })
    },
    
    // 查看用户主页
    viewUser(userId) {
      uni.navigateTo({
        url: `/pagesA/user?id=${userId}`
      })
    },
    
    // 查看相关笔记
    viewRelated(noteId) {
      uni.navigateTo({
        url: `/pages/note/note?id=${noteId}`
      })
    },
    
    // 发布评论
    async postComment() {
      if (!this.commentContent.trim()) {
       
        return
      }
      const newComment = {
        parent_id: this.parent_id,
        content: this.commentContent,
        confession_id:this.option.id
      }
      
      const res = await this.$api.post('/Comment/save',newComment,true)
      if(res.data.code === 200) {
		  this.comments.unshift(newComment)
		  this.commentCount++
		  this.commentContent = ''
		  this.showEmoji = false
		  
		 
		  this.getUserInfo(this.option.id)
		  this.loadComments()
	  }
      
      
     
    },
    
    // 回复评论
    replyComment(index) {
	  this.ping = `回复 @${this.comments[index].nickname}: `
      uni.pageScrollTo({
        scrollTop: 99999,
        duration: 300
      })
	  this.parent_id = this.comments[index].id
      setTimeout(() => {
        const input = this.$refs.commentInput
        input && input.focus()
      }, 350)
    },
    
    // 查看全部回复
    viewAllReplies(comment) {
     console.log('comment',comment)
	 comment.show = !comment.show
    },
    
    // 收藏
    async likeComment (index) {
	  this.userInfo.is_collected = !this.userInfo.is_collected
	  const params = {
		  target_type:'1', //告白
		  target_id:this.userInfo.id
	  }
	  const url = !this.userInfo.is_collected?'/Favorite/cancel':'/Favorite/add'
 	  const res = await this.$api.post(url,params,true)
	  if(res.data.code === 200) {
		  this.getUserInfo(this.option.id)
	  }
    },
	// 点赞
	async likecount(){
	  this.userInfo.is_liked==0?1:0
	  if(this.userInfo.is_liked == 0){
	    const res = await this.$api.post('/Like/add',{uid:this.userInfo.user_id, target_id:this.userInfo.id,target_type:1},true)
	    if(res.data.code === 200) {
	      this.userInfo.is_liked = 1
	      this.userInfo.like_count = this.userInfo.like_count + 1
	    }
	  } else {
	    const res = await this.$api.post('/Like/cancel',{uid:this.userInfo.user_id,target_id:this.userInfo.id,target_type:1},true)
	    if(res.data.code === 200) {
	      this.userInfo.is_liked = 0
	      this.userInfo.like_count = this.userInfo.like_count -1
	    }
	  }
	  
	},
    
    // 加载更多评论
    loadMoreComments() {
      if (!this.hasMoreComments) {
        // uni.showToast({
        //   title: '没有更多评论了',
        //   icon: 'none'
        // })
        return
      }
      
      this.commentPage++
      uni.showLoading({
        title: '加载中...'
      })
      
      setTimeout(() => {
        const newComments = [
          {
            id: 100 + this.commentPage,
            user: { id: 10 + this.commentPage, avatar: `https://picsum.photos/200/200?random=${10 + this.commentPage}`, nickname: `用户${this.commentPage}` },
            content: `这是第${this.commentPage}页加载的评论，贵阳是个好地方，适合生活。`,
            createTime: `${this.commentPage}天前`,
            likeCount: Math.floor(Math.random() * 10),
            isLiked: false,
            replies: [],
            replyCount: 0
          }
        ]
        
        this.comments = [...this.comments, ...newComments]
        
        if (this.commentPage >= 3) {
          this.hasMoreComments = false
        }
        
        uni.hideLoading()
      }, 1000)
    },
    
    // 切换emoji面板
    toggleEmoji() {
      this.showEmoji = !this.showEmoji
      if (this.showEmoji) {
        setTimeout(() => {
          const input = this.$refs.commentInput
          input && input.blur()
        }, 50)
      }
    },
    
    // 插入emoji
    insertEmoji(emoji) {
      this.commentContent += emoji
    }
  },
  onLoad(option) {
	this.option = option
  	this.getUserInfo(this.option.id)
	this.loadComments()
    // 监听swiper变化
    this.$nextTick(() => {
      const query = uni.createSelectorQuery().in(this)
      query.select('.slider').fields({
        properties: ['current']
      }, res => {
        if (res) {
          this.$watch('currentImageIndex', (newVal) => {
            this.currentImageIndex = newVal
          })
        }
      }).exec()
    })
  }
}
</script>

<style scoped>
/* 全局样式 */
.container {
  background-color: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 120px;
  position: relative;
}
/* 顶部导航栏 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
}

/* 返回按钮 */
.back-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 101;
}

.back-icon {
  width: 18px;
  height: 18px;
}

/* 用户信息（居中） */
.user-info {
  position: absolute;
  display: flex;
  align-items: center;
  max-width: 60%;
  padding: 10px;
}

.avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-right: 25rpx;
  border: 1px solid rgba(255,255,255,0.5);
}

.user-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nickname {
  font-size: 24rpx;
  /* font-weight: bold; */
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.follow-btn {
  font-size: 10px;
  color: #fff;
  background-color: #ff2442;
  border-radius: 10px;
  padding: 1px 6px;
  margin-top: 2px;
}

/* 右侧操作按钮 */
.header-actions {
  display: flex;
  align-items: center;
  z-index: 101;
}

.action-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  padding: 0;
}

.action-icon {
  width: 18px;
  height: 18px;
}
.back-btn {
  width: 30px;
  position: absolute;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 18px;
  height: 18px;
}

.header-actions {
  display: flex;
}

.action-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 15px;
  padding: 0;
}

.action-icon {
  width: 18px;
  height: 18px;
}

/* 内容区域 */
.content {
  padding-top: 60px;
}





.user-text {
  flex: 1;
}

.nickname {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 2px;
}

.follow-btn {
  font-size: 12px;
  color: #ff2442;
  border: 1px solid #ff2442;
  border-radius: 12px;
  padding: 2px 10px;
  display: inline-block;
}

/* 标题 */
.title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  padding: 0 15px;
  margin-bottom: 15px;
  line-height: 1.4;
}

/* 图片轮播 */
.image-slider {
  width: 100%;
  height: 100vw;
  position: relative;
}

.slider {
  width: 100%;
  height: 100%;
}

.slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-count {
  position: absolute;
  right: 15px;
  bottom: 15px;
  background-color: rgba(0,0,0,0.4);
  color: #fff;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 10px;
}

/* 标签 */
.tags {
  display: flex;
  flex-wrap: wrap;
  padding: 0 15px;
  margin: 10px 0;
}

.tag {
  font-size: 14px;
  color: #ff2442;
  margin-right: 10px;
  margin-bottom: 5px;
}

/* 笔记正文 */
.note-content {
  font-size: 16px;
  color: #333;
  line-height: 1.8;
  padding: 0 15px;
  margin-bottom: 15px;
}

/* 位置信息 */
.location {
  display: flex;
  align-items: center;
  padding: 0 15px;
  margin-bottom: 15px;
}

.location-icon {
  width: 14px;
  height: 14px;
  margin-right: 5px;
}

.location-text {
  font-size: 12px;
  color: #666;
}

/* 发布时间 */
.publish-time {
  font-size: 12px;
  color: #999;
  padding: 0 15px;
  margin-bottom: 20px;
}

/* 互动区域 */
.interaction-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 15px 0;
  margin: 0 15px;
  border-top: 1rpx solid #eee;
  /* border-bottom: 1px solid #eee; */
}

.interaction-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.interaction-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 5px;
}

.interaction-count {
  font-size: 12px;
  color: #999;
}

.interaction-count.active {
  color: #ff2442;
}

/* 相关推荐 */
.related-recommendations {
  margin: 20px 0;
  padding: 0 15px;
}

.section-title {
  margin-bottom: 15px;
}

.title-text {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.recommendation-list {
  white-space: nowrap;
}

.recommendation-item {
  width: 120px;
  height: 160px;
  display: inline-block;
  margin-right: 10px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.recommendation-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recommendation-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 评论区域 */
.comments-section {
  padding: 0 15px;
  margin-bottom: 20px;
}

.comment-item {
  display: flex;
  padding: 15rpx 0;
  /* border-bottom: 1px solid #f0f0f0; */
}

.comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 12px;
  flex-shrink: 0;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  align-items: center;
}

.comment-user {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-right: 8px;
}

.comment-time {
  font-size: 10px;
  margin-left: 10rpx;
  color: #999;
}

.comment-text {
  color: #333;
  line-height: 1.2;
}

.comment-actions {
  display: flex;
  align-items: center;
}

.like-comment {
  display: flex;
  align-items: center;
}

.like-icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}

.like-count {
  font-size: 14px;
  color: #999;
}

.like-count.active {
  color: #ff2442;
}

/* 回复列表 */
.replies-container {
  background-color: #f7f7f7;
  border-radius: 8px;
  padding: 10rpx;
}

.reply-item {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
}

.reply-user {
  font-weight: bold;
  color: #666;
}

.view-more-replies {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.reply-btn {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
}

/* 没有评论 */
.no-comments {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
}

.empty-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
  opacity: 0.6;
}

.empty-text {
  font-size: 14px;
  color: #999;
}

/* 加载更多 */
.load-more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
}

.load-more-text {
  font-size: 14px;
  color: #999;
  margin-right: 5px;
}

.arrow-down {
  width: 12px;
  height: 12px;
}

/* 底部评论输入框 */
.comment-input-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  border-top: 1rpx solid #eee;
  z-index: 100;
}

.input-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
}

.input-container {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f7f7f7;
  border-radius: 18px;
  padding: 5px 15px;
}

.comment-input {
  flex: 1;
  height: 36px;
  font-size: 15px;
}

.input-actions {
  display: flex;
  align-items: center;
}

.emoji-btn {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.post-btn {
  font-size: 14px;
  color: #999;
  padding: 0;
  background: none;
  line-height: 1;
}

.post-btn.active {
  color: #ff2442;
}

/* Emoji面板 */
.emoji-panel {
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  height: 250px;
  background-color: #fff;
  border-top: 1rpx solid #eee;
  z-index: 99;
}

.emoji-list {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  
}
.emoji-list-dis{
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 20rpx 0rpx 40rpx 30rpx;
}

.emoji-item {
  font-size: 33rpx;
  width: 12.5%;
  height: 40px;
  display: flex;
  margin-right: 15rpx;
  align-items: center;
  justify-content: center;
}
</style>